<template>
	<div class="number-keyboard" @click="handlerHide">
		<div
			class="warp"
			@click.stop="
				() => {
					return false;
				}
			"
		>
			<div class="key-item" :class="(key + 1) % 3 === 0 ? 'no-right' : ''" v-for="(item, key) in 9" :key="key" @click="handlerEnter(key + 1)">{{ key + 1 }}</div>
			<div class="key-item empty"></div>
			<div class="key-item" @click="handlerEnter(0)">0</div>
			<div class="key-item delete" @click="handlerDelete">
				<div class="key-icon"><image src="../static/icon/delete-keybord.png" alt="" /></div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		maxLength: {
			type: Number,
			default: () => {
				return 6;
			}
		},
		textLength: {
			type: Number,
			default: () => {
				return 0;
			}
		}
	},
	methods: {
		handlerEnter(number) {
			if (this.textLength >= this.maxLength) {
				return false;
			}
			this.$emit('enter', number);
		},
		handlerDelete() {
			this.$emit('delete', 1);
		},
		handlerHide() {
			this.$emit('hide', 1);
		}
	},
	watch: {
		textLength(val, oldVal) {
			if (val >= this.maxLength) {
				this.$emit('endInput', 1);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.number-keyboard {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	.warp {
		animation: mymove 0.5s 1;
		border-top: 1px solid #d6d6d6;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		flex-wrap: wrap;
		// background: rgba(246, 246, 246, 1);
		background: #fff;
		.key-item {
			width: calc(100% / 3 - 1px);
			height: 124upx;
			border-bottom: 1px solid #d6d6d6;
			border-right: 1px solid #d6d6d6;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 50upx;
			color: #000;
			font-weight: bold;
			line-height: 1;
			&:active {
				background: #ebebeb;
			}
		}
		.no-right {
			border-right: 1px solid transparent;
		}
		.delete {
			font-size: 0;
			background: #ebebeb;
			.key-icon {
				width: 55upx;
				height: 55upx;
				background: #fff;
				border-radius: 5upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 0;
				image {
					width: 100%;
					height: 100%;
				}
			}
			&:active {
				// background: rgba(246, 246, 246, 1);
				background: #fff;
			}
		}
		.empty {
			background: #ebebeb;
		}
	}
}

@keyframes mymove {
	0% {
		bottom: -100%;
	}
	100% {
		bottom: 0;
	}
}
</style>
